<template>
  <h1>个人简历练习</h1>
  <table border="1">
    <tr>
      <td>照片：</td>
      <td><img :src="user.picture" alt=""></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{ user.name }}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{ user.age }}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="friend in user.friend">{{ friend }}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="jz">点击加载数据</button>
</template>

<script setup>
import {ref} from 'vue';

// 定义用户信息
const user = ref({
  picture: '',
  name: '',
  age: '',
  friend: ''
});

const jz = () => {
  user.value= {
    picture: 'mr.png',
    name: '鸣人',
    age: 18,
    friend: ['小红', '小明', '小刚']
  }
};

</script>

<style scoped>

</style>
